<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <meta name="description" content="A fully featured admin theme which can be used to build CRM, CMS, etc.">
    <meta name="author" content="Coderthemes">

    <link rel="shortcut icon" href="images/favicon_1.ico">

    <title>水电工匠后台管理系统</title>

    <link href="plugins/sweetalert/dist/sweetalert.css" rel="stylesheet" type="text/css">

    <link href="css/bootstrap.min.css" rel="stylesheet" type="text/css">
    <link href="css/core.css" rel="stylesheet" type="text/css">
    <link href="css/icons.css" rel="stylesheet" type="text/css">
    <link href="css/components.css" rel="stylesheet" type="text/css">
    <link href="css/pages.css" rel="stylesheet" type="text/css">
    <link href="css/menu.css" rel="stylesheet" type="text/css">
    <link href="css/responsive.css" rel="stylesheet" type="text/css">

    <script src="js/modernizr.min.js"></script>



    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
    <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
    <![endif]-->

    <style>
        .carousel{
            height: 450px;
        }
        .carousel .item{
            height: 450px;
        }
        .carousel img{
            width:100%;
        }
        .table{
            /*width: 500px;*/
            margin-left: 30%;
        }
        .table tbody td{
            vertical-align: middle;
        }
        .table tbody tr td select{
            width: 183px;
        }
        .table tbody tr td input{
            width: 183px;
        }

    </style>

</head>


<body class="fixed-left">
<!-- 欢迎界面 -->
<!-- ============================================================== -->
<!-- Start right Content here -->
<!-- ============================================================== -->
<div class="content-page">
    <!-- Start content -->
    <div class="content">
        <div class="container">

            <!-- Page-Title -->
            <div class="row">
                <div class="col-sm-12">
                    <ol class="breadcrumb pull-left">
                        <li><a href="/shuidian2/index">水电工管理</a></li>
                        <li class="active">添加水电工</li>
                    </ol>
                </div>
            </div>




            <div class="row">
                <div class="col-lg-12">
                    <div class="panel panel-default">
                        <div class="panel-heading">
                            <h3 class="panel-title" style="display:inline">添加水电工</h3>
                            <a href="/shuidian2/index" type="button" class="btn  btn-xs btn-link pull-right" style="background-color:#efefef;display:inline;"><i class="glyphicon glyphicon-share-alt" ></i>返回</a>
                        </div>
                        <div class="panel-body">
                            <div class="col-lg-8 ">
                                <form id="addform" th:action="@{/manager/plumber/add}" method="post" enctype="multipart/form-data">
                                    <table class="table table-hover ">
                                        <tbody>
                                        <tr >
                                            <td ><label for="plumberTruename">姓名（*必填）</label></td>
                                            <td >
                                                <input type="text"  id="plumberTruename" name="plumberTruename" required="" aria-required="true">
                                            </td>
                                        </tr>
                                        <tr>
                                            <td ><label for="plumberName">用户名（*必填）</label></td>
                                            <td ><input type="text" name="plumberName" id="plumberName" required="" aria-required="true"></td>
                                        </tr>
                                        <tr>
                                            <td ><label for="plumberTel">手机号（*必填）</label></td>
                                            <td ><input type="text" name="plumberTel" id="plumberTel" required="" aria-required="true"></td>
                                        </tr>
                                        <tr>
                                            <td ><label for="plumberIdcard">身份证号</label></td>
                                            <td ><input type="text" name="plumberIdcard" id="plumberIdcard"></td>
                                        </tr>
                                        <tr>
                                            <td ><label for="plumberAge">年龄</label></td>
                                            <td ><input type="text" name="plumberAge" id="plumberAge"></td>
                                        </tr>
                                        <tr>
                                            <td ><label >地址（省）</label></td>
                                            <td ><select class="prov aaddress1" id="select_province" data-code ="220000" name="plumberProvinceInt"></select></td>
                                            <input  style="display: none" type="text" id="addressProvince" name="plumberProvince"/>
                                        </tr>
                                        <tr>
                                            <td ><label>地址（市）</label></td>
                                            <td ><select class="city aaddress2" id="select_city" data-code ="220100" name="plumberCityInt"></select></td>
                                            <input  style="display: none" type="text" id="addCity" name="plumberCity"/>
                                        </tr>
                                        <tr>
                                            <td ><label>地址（区）</label></td>
                                            <td ><select class="dist aaddress3" id="select_area" data-code ="220104" name="plumberDistrictInt"></select></td>
                                            <input style="display: none" id="addDistrict" type="text" name="plumberDistrict" />
                                        </tr>

                                        <tr>
                                            <td ><label for="plumberDetailAddress">详细地址</label></td>
                                            <td ><input type="text" name="plumberDetailAddress" id="plumberDetailAddress"></td>
                                        </tr>
                                        <tr >
                                            <td><label for="plumberLifePicUrl">生活照</label></td>
                                            <td><input type="file" id="plumberLifePicUrl" name="lifePic" onchange="preImg(this.id,'ImgPr3')"/><div><img id="ImgPr3" width="120" height="120" alt="近期生活照"/></div></td>
                                        </tr>
                                        <tr >
                                            <td><label for="plumberCardPicUrl1">身份证正面照</label></td>
                                            <td><input type="file" id="plumberCardPicUrl1" name="IDfront" onchange="preImg(this.id,'ImgPr1')" /><div><img id="ImgPr1" width="120" height="120" alt="身份证正面照"/></div></td>
                                        </tr>
                                        <tr >
                                            <td><label for="plumberCardPicUrl2">身份证反面照</label></td>
                                            <td><input type="file" id="plumberCardPicUrl2" name="IDback" onchange="preImg(this.id,'ImgPr2')" /><div><img id="ImgPr2" width="120" height="120" alt="身份证反面照"/></div></td>
                                        </tr>
                                        <tr>
                                            <td ><label for="plumberWeixin">微信号</label></td>
                                            <td ><input type="text" name="plumberWeixin" id="plumberWeixin"></td>
                                        </tr>
                                        <tr>
                                            <td ><label for="plumberQq">QQ号</label></td>
                                            <td ><input type="text" name="plumberQq" id="plumberQq"></td>
                                        </tr>
                                        <tr>
                                            <td ><label for="plumberSina">新浪帐号</label></td>
                                            <td ><input type="text" name="plumberSina" id="plumberSina"></td>
                                        </tr>
                                        <tr>
                                            <td ><label for="plumberSourceFrom">帐号来源</label></td>
                                            <td >
                                                <select name="plumberSourceFrom" id="plumberSourceFrom" >
                                                    <option selected="selected" value="0">电话</option>
                                                    <option value="1">微信号</option>
                                                    <option value="2">QQ</option>
                                                    <option value="3">新浪微博</option>
                                                </select>
                                            </td>
                                        </tr>
                                        <tr>
                                            <!-- <td colspan="2">
                                              <button type="button" class="btn btn-info btn-sm">提交</button>
                                          </td> -->
                                            <td colspan="2">
                                                <div class="col-lg-offset-2 col-lg-10">
                                                    <button class="btn btn-success waves-effect waves-light" type="submit" onclick="submitForm()">提交</button>
                                                    <button class="btn btn-default waves-effect" type="button" onclick="goback()">取消</button>
                                                </div>
                                            </td>


                                        </tr>


                                        </tbody>

                                    </table>
                                </form>
                            </div>
                        </div>
                    </div>

                </div> <!-- end col -->

            </div> <!-- End row -->



        </div> <!-- container -->

    </div> <!-- content -->

    <footer class="footer text-right">
        Copyright © 2018 丽岛柳园实验室 版权所有
    </footer>

</div>
<!-- ============================================================== -->
<!-- End Right content here -->
<!-- ============================================================== -->
<script>
    var resizefunc = [];
</script>


<!-- jQuery  -->
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/detect.js"></script>
<script src="js/fastclick.js"></script>
<script src="js/jquery.slimscroll.js"></script>
<script src="js/jquery.blockUI.js"></script>
<script src="js/waves.js"></script>
<script src="js/wow.min.js"></script>
<script src="js/jquery.nicescroll.js"></script>
<script src="js/jquery.scrollTo.min.js"></script>
<script src="js/uploadPreview.js"></script>

<script src="js/jquery.app.js"></script>
<script type="text/javascript" src="js/shengshiqv.js"></script>

<!-- moment js  -->
<script src="plugins/moment/moment.js"></script>

<!-- counters  -->
<script src="plugins/waypoints/lib/jquery.waypoints.js"></script>
<script src="plugins/counterup/jquery.counterup.min.js"></script>

<!-- sweet alert  -->
<script src="plugins/sweetalert/dist/sweetalert.min.js"></script>


<!-- flot Chart -->
<script src="plugins/flot-chart/jquery.flot.js"></script>
<script src="plugins/flot-chart/jquery.flot.time.js"></script>
<script src="plugins/flot-chart/jquery.flot.tooltip.min.js"></script>
<script src="plugins/flot-chart/jquery.flot.resize.js"></script>
<script src="plugins/flot-chart/jquery.flot.pie.js"></script>
<script src="plugins/flot-chart/jquery.flot.selection.js"></script>
<script src="plugins/flot-chart/jquery.flot.stack.js"></script>
<script src="plugins/flot-chart/jquery.flot.crosshair.js"></script>

<!-- todos app  -->
<script src="pages/jquery.todo.js"></script>

<!-- chat app  -->
<script src="pages/jquery.chat.js"></script>
<script src="js/jquery-form.js"></script>

<!-- dashboard  -->
<script src="pages/jquery.dashboard.js"></script>
<script th:inline="javascript">
    function submitForm() {

        var prov=$("#select_province").find("option:selected").text();
        var city=$("#select_city").find("option:selected").text();
        var area=$("#select_area").find("option:selected").text();
        $("#addDistrict").val(area);
        $("#addCity").val(city);
        $("#addressProvince").val(prov);

        return false;
    }

    $(function () {

        region_init("select_province","select_city","select_area");
            $("#plumberCardPicUrl1").uploadPreview({ Img: "ImgPr1", Width: 120, Height: 120 });
            $("#plumberCardPicUrl2").uploadPreview({ Img: "ImgPr2", Width: 120, Height: 120 });
            $("#plumberLifePicUrl").uploadPreview({ Img: "ImgPr3", Width: 120, Height: 120 });
        $("#addform").ajaxForm(function (data) {
            if(data){
                alert("添加成功");
                window.location.href='/shuidian2/index';
            }
        })
    });

            function getFileUrl(sourceId) {
                var url;
                if (navigator.userAgent.indexOf("MSIE")>=1) { // IE  
                    url = document.getElementById(sourceId).value;
                } else if(navigator.userAgent.indexOf("Firefox")>0) { // Firefox  
                    url = window.URL.createObjectURL(document.getElementById(sourceId).files.item(0));
                } else if(navigator.userAgent.indexOf("Chrome")>0) { // Chrome  
                    url = window.URL.createObjectURL(document.getElementById(sourceId).files.item(0));
                }
                return url;
            }
            function preImg(sourceId, targetId) {
                var url = getFileUrl(sourceId);
                var imgPre = document.getElementById(targetId);
                imgPre.src = url;
            }
            function goback() {
                window.location.href="/shuidian2/index";
            }

</script>
</body>
</html>